<template>
	<div class="order">
		<list-title :data="header"></list-title>
		<el-form :model="orderForm" :rules="rules" ref="orderForm" label-width="200px">
			<el-form-item label="选择会员" prop="data.member_id">
				<el-select
				v-model="orderForm.data.member_id"
				filterable
				remote
				reserve-keyword
				placeholder="请输入关键词"
				:remote-method="searchMember"
				:loading="loading">
					<el-option
					v-for="item in memberList"
					:key="item.value"
					:label="item.label"
					:value="item.value">
					</el-option>
				</el-select>
				<el-button type="primary" @click="addPro()">增加鉴品</el-button>
			</el-form-item>
			<div :class="'bg' + (index+1)" style="padding: 10px 0;" 
			v-for="(item, index) in orderForm.data.goodsInfo" :key="index">
				<el-form-item label="鉴品分类" prop="data.catid" style="width: 650px;">
<!-- 					<el-select v-model="item.catid" filterable placeholder="请选择鉴品分类" style="width: 334px">
						<el-option label="请选择鉴品分类" value="0"></el-option>
					</el-select> -->
					<el-select v-model="item.catid" filterable placeholder="请选择类别" @change="chooseCategory(index)">
						<el-option label="请选择类别" value="0"></el-option>
						<el-option v-for="(item, index) in categoryList" 
						:key="index" 
						:label="item.name" 
						:value="item.catid">
						</el-option>
					</el-select>
					<el-button type="danger" v-if="index < orderForm.data.goodsInfo.length - 1" @click="delPro(index)">删除鉴品</el-button>
				</el-form-item>
				<el-form-item label="鉴品名称" prop="data.name" style="width: 600px;">
					<el-input v-model="item.name" placeholder="鉴品名称"></el-input>
				</el-form-item>
				<el-form-item label="描述" prop="data.desc" style="width: 830px;">
					<el-input type="textarea" :rows="3" placeholder="请输入描述" v-model="item.desc"></el-input>
				</el-form-item>
				<el-form-item label="鉴品图片" prop="data.preview" style="width: 565px;">
					<upload-oss 
					:stsdomain="$domain.ac" 
					:ossdomain="$ossdomain" 
					:field="index" 
					:limit="5" 
					:fileList="item.preview" 
					:maxSize="20" 
					@insertFile="insertFile"
					@delFile="delFile">
					</upload-oss>
				</el-form-item>
				<el-form-item label="年代" prop="data.dynasty" style="width: 600px;">
					<el-input v-model="item.dynasty" placeholder="年代"></el-input>
				</el-form-item>
				<el-form-item label="长" prop="data.long" style="width: 600px;" v-if="showAttr('long', item.catid)">
					<el-input v-model="item.long" placeholder="长"></el-input>
				</el-form-item>
				<el-form-item label="宽" prop="data.wide" style="width: 600px;" v-if="showAttr('wide', item.catid)">
					<el-input v-model="item.wide" placeholder="宽"></el-input>
				</el-form-item>
				<el-form-item label="高" prop="data.high" style="width: 600px;" v-if="showAttr('high', item.catid)">
					<el-input v-model="item.high" placeholder="高"></el-input>
				</el-form-item>
				<el-form-item label="厚度" prop="data.thick" style="width: 600px;" v-if="showAttr('thick', item.catid)">
					<el-input v-model="item.thick" placeholder="厚度"></el-input>
				</el-form-item>
				<el-form-item label="直径" prop="data.diameter" style="width: 600px;" v-if="showAttr('diameter', item.catid)">
					<el-input v-model="item.diameter" placeholder="直径"></el-input>
				</el-form-item>
				<el-form-item label="重量" prop="data.weight" style="width: 600px;" v-if="showAttr('weight', item.catid)">
					<el-input v-model="item.weight" placeholder="重量"></el-input>
				</el-form-item>
				<el-form-item label="材质" prop="data.material" style="width: 600px;" v-if="showAttr('material', item.catid)">
					<el-input v-model="item.material" placeholder="材质"></el-input>
				</el-form-item>
			</div>
			<el-form-item style="margin-top: 10px;">
				<el-button type="primary" @click="submitForm('orderForm')" :disabled='orderForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='orderForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('orderForm')" v-if='orderForm.data.goodsInfo.id == 0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import UploadOss from "pc/common/UploadOss"
import {changeToBool, changeUploadFormatBack} from "static/js/common.js"

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '添加备案',
				reload: false,
				buttons: [
					{
						title: '备案列表',
						type: 'primary',
						pathName: 'pc/epi/pj8/ExpertsList'
					}
				]
			},
			loading: false,
			value: '',
			memberList: [],
			categoryList: [],
			/*字段数据*/
			orderForm: {
				submitLock: false,
				data: {
					member_id: '',//选择的会员ID
					source: '2',//来源
					goodsInfo: [
						{
							id: 0,
							catid: '0',
							name: '',
							preview: [],
							desc: '',
							dynasty: '',
							long: '',
							wide: '',
							high: '',
							thick: '',
							diameter: '',
							weight: '',
							material: ''
						}
					]
				}
			},
			rules: {
				data: {
					member_id: [
						{ required: true, message: '请选择会员', trigger: 'blur' }
					],
					// name: [
					// 	{ required: true, message: '请输入鉴品名称', trigger: 'blur' },
					// 	{ min: 2, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
					// ],
					// catid: [
					// 	{ required: true, message: '请选择分类', trigger: 'blur' }
					// ],
					// dynasty: [
					// 	{ required: true, message: '请输入年代', trigger: 'blur' },
					// 	{ min: 2, max: 16, message: '长度在 1 到 16 个字符', trigger: 'blur' }
					// ]
				}
			}
		};
	},
	components: {
		ListTitle,
		UploadOss
	},
	created: function() {
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			// this.getExperts(this.$route.query.id)
		}
		/*分类数据*/
		this.getCategoryList();
	},
	methods: {
		/*搜索会员*/
		searchMember: function(v) {
			// console.log(v)
			if(v == "") {
				return '';
			}
			if(this.$api.memberList != undefined){
				this.$get(this.$api.memberList, {
					nickname: v
				}).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						this.memberList = []
						if(res.data.data.list != undefined && res.data.data.list.length > 0){
							// console.log(res.data.data.list, 111);
							Object.keys(res.data.data.list).forEach((k) => {
								this.memberList.push (
									{
										value: res.data.data.list[k].member_id,
										label: res.data.data.list[k].nickname
									}
								);
							})
							this.pagination = res.data.data.pageInfo
						}
					}
				})
				.catch(err => {})
				.finally(() => {
					this.tableLoading = false
				}) 
			}else{
				this.$message({
					showClose: true,
					message: '没有会员列表的权限',
					type: 'error'
				});
			}
		},
		/*分类数据*/
		getCategoryList: function(parentid = 0){
			if(this.$api.goodsCategoryList != undefined){
				this.$get(this.$api.goodsCategoryList, {
					// 'parentid': parentid,
					'display': 0,
				}).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.categoryList = []
							Object.keys(res.data.data).forEach((k) => {
								let indent = '';
								// console.log(res.data.data[k].level);
								for(var i=1; i<res.data.data[k].level; i++){
									if(i == 1){
										indent += '|---';
									}else{
										indent += '---';
									}
								}
								this.categoryList.push ({
									catid: res.data.data[k].catid,
									name: indent + res.data.data[k].name,
									parentid: res.data.data[k].parentid
								});
							})
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {
					this.loading = false
				}) 
			}
		},
		/*选择栏目*/
		chooseCategory: function(index){
			// console.log(this.orderForm.goodsInfo[index])
			let catid = this.orderForm.data.goodsInfo[index].catid;
		},
		/*取出需要修改的数据*/
		getOrder: function(){
			this.header.title = '编辑备案'
			/*取出需要修改的数据*/
			this.orderForm.submitLock = true;
			this.$get(this.$api.modifyExperts, {
				'id': this.$route.query.id
			}).then(res => {
				if(res.data.code === 0){
					if(res.data.data != undefined){

					}
					this.tableLoading = false
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.orderForm.submitLock = false;
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.orderForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// console.log(this.orderForm.data)
						// return
						this.orderForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addOrder//默认是添加
						if(this.orderForm.data.id > 0){//修改
							apiUrl = this.$api.modifyOrder
						}
						/*添加菜单*/
						let data = JSON.parse(JSON.stringify(this.orderForm.data))

						this.$post(apiUrl, {
							OrderInfo: data,
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								if(this.orderForm.data.id > 0){
									this.$router.go(-1)	
								}else{
									this.orderForm.data.goodsInfo = [
										{
											id: 0,
											catid: '0',
											name: '',
											preview: [],
											desc: '',
											dynasty: '',
											long: '',
											wide: '',
											high: '',
											thick: '',
											diameter: '',
											weight: '',
											material: ''
										}
									]
									this.$refs[formName].resetFields();
								}
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.orderForm.submitLock = false;
						}).catch(err => {
							this.orderForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*增加备案*/
		addPro() {
			if(this.orderForm.data.goodsInfo.length >= 5) {
				this.$message({
						showClose: true,
						message: "最多只能增加5个鉴品",
						type: 'error'
					});
				return;
			}
			this.orderForm.data.goodsInfo.unshift(
				{
					id: 0,
					catid: '0',
					name: '',
					preview: [],
					desc: '',
					dynasty: '',
					long: '',
					wide: '',
					high: '',
					thick: '',
					diameter: '',
					weight: '',
					material: ''
				}
			)
		},
		/*删除备案*/
		delPro(index) {
			// console.log(index)
			if(this.orderForm.data.goodsInfo.length <= 1) {
				this.$message({
						showClose: true,
						message: "最少上传一个鉴品",
						type: 'error'
					});
				return;
			}
			this.orderForm.data.goodsInfo.splice(index, 1)
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		/*插入上传的文件*/
		insertFile(list, field){
			if(list instanceof Array){//如果是数组的话，说明是图片
				for(let i=0; i < list.length; i++){
					// console.log(list[i].url)
					this.orderForm.data.goodsInfo[field].preview.push(
						{
							name: '',
							url:  list[i].url
						}
					)
				}
			}else{//单个文件路径

			}
		},
		/*删除上传的文件*/
		delFile(index, field){
			// console.log(field)
			if(index >= 0){//图片
				this.orderForm.data.goodsInfo[field].preview.splice(index, 1)
			}else{//文件路径

			}
		},
	},
    computed: {
    	/*属性显示*/
		showAttr(attr, catid) {
			return function (attr, catid) {
				// console.log(attr, 222);
				// console.log(catid, 333);
				let arr1 = ['long', 'wide', 'high']//瓷器
				let arr2 = ['diameter', 'weight', 'material']//钱币
				let arr3 = ['long', 'wide', 'high', 'weight', 'material']//明清铜器
				let arr4 = ['long', 'wide']//书画
				let arr5 = ['long', 'wide', 'thick', 'weight', 'material']//铜镜
				let arr6 = ['long', 'wide', 'high', 'material']//明清家具
				let arr7 = ['long', 'wide', 'high', 'weight', 'material']//佛像
				let arr8 = ['long', 'wide', 'high']//古籍
				let arr9 = ['weight']//老酒
				let arr10 = ['long', 'wide', 'high', 'material']//玉器
				for(let i = 0; i < this.categoryList.length; i++) {
					if(catid == this.categoryList[i].catid && catid > 10) {
						catid = this.categoryList[i].parentid
					}
				}
				let show = false
				switch(catid) {
					case '1'://瓷器
						if(arr1.indexOf(attr) > -1) {
							// console.log(show, 456)
							show = true;
						}
						break;
					case '2'://钱币
						if(arr2.indexOf(attr) > -1) {
							show = true;
						}
						break;
					case '3'://明清铜器
						if(arr3.indexOf(attr) > -1) {
							show = true;
						}
						break;
					case '4'://书画
						if(arr4.indexOf(attr) > -1) {
							show = true;
						}
						break;
					case '5'://铜镜
						if(arr5.indexOf(attr) > -1) {
							show = true;
						}
						break;
					case '6'://明清家具
						if(arr6.indexOf(attr) > -1) {
							show = true;
						}
						break;
					case '7'://佛像
						if(arr7.indexOf(attr) > -1) {
							show = true;
						}
						break;
					case '8'://古籍
						if(arr8.indexOf(attr) > -1) {
							show = true;
						}
						break;
					case '9'://老酒
						if(arr9.indexOf(attr) > -1) {
							show = true;
						}
						break;
					case '10'://玉器
						if(arr10.indexOf(attr) > -1) {
							show = true;
						}
						break;
				}
				// console.log(show, 123)
				return show;
			}
		}
    }
};
</script>

<style lang="stylus" scoped>
.order
	form
		margin-top: 10px
	.bg1
		background-color: #f9f9f9;
	.bg2
		background-color: #f3f2f2;
	.bg3
		background-color: #f9f9f9;
	.bg4
		background-color: #f3f2f2;
	.bg5
		background-color: #f9f9f9;
</style>